403. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2021-05-13 09:09:22 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

403.1 Files compared

#LocationFileLast Modified
1/Applications/Ampps/www/Porto 3.2.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Swatches/web/cssswatches.css2018-01-13 21:20:28 +0000
2/Applications/Ampps/www/Porto v4.0.0/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto_rtl/Magento_Swatches/web/cssswatches.css2021-01-18 06:12:26 +0000

403.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged2608
Changed00
Inserted00
Removed14

403.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

403.4 Active regular expressions

No regular expressions were active.

403.5 Comparison detail

1 /** 1 /**
2  * Copyright © 2015 Magento. All rights reserved. 2  * Copyright © 2015 Magento. All rights reserved.
3  * See COPYING.txt for license details. 3  * See COPYING.txt for license details.
4  */ 4  */
5  5 
6 .swatch-attribute-options { 6 .swatch-attribute-options {
7     display: inline-block; 7     display: inline-block;
8     vertical-align: middle; 8     vertical-align: middle;
9     margin: 0 -3px; 9     margin: 0 -3px;
10 } 10 }
11  11 
12 .product-info-main .swatch-attribute-options { 12 .product-info-main .swatch-attribute-options {
13     display: block; 13     display: block;
14     margin: 15px 0; 14     margin: 15px 0;
15 } 15 }
16  16 
17 .swatch-attribute-label { 17 .swatch-attribute-label {
18     font-weight: 400; 18     font-weight: 400;
19     color: #333; 19     color: #333;
20     position: relative; 20     position: relative;
21 } 21 }
22 .swatch-attribute-label:after { 22 .swatch-attribute-label:after {
23     content: ":"; 23     content: ":";
24 } 24 }
25 .swatch-attribute-label.required { 25 .swatch-attribute-label.required {
26     padding-left: 10px; 26     padding-left: 10px;
27 } 27 }
28  28 
29 .swatch-attribute-label[data-required="1"]:after { 29 .swatch-attribute-label[data-required="1"]:after {
30     content: '*'; 30     content: '*';
31     color: red; 31     color: red;
32     position: absolute; 32     position: absolute;
33     left: -11px; 33     left: -11px;
34     top: -2px; 34     top: -2px;
35     font-weight: bold; 35     font-weight: bold;
36     font-size: 1em; 36     font-size: 1em;
37 } 37 }
38  38 
39 .swatch-attribute-selected-option { 39 .swatch-attribute-selected-option {
40     color: #646464; 40     color: #646464;
41     padding-right: 17px; 41     padding-right: 17px;
42 } 42 }
43  43 
44 .swatch-option { 44 .swatch-option {
45     /*width: 30px;*/ 45     /*width: 30px;*/
46     padding: 1px 2px; 46     padding: 1px 2px;
47     min-width: 27.7px; 47     min-width: 27.7px;
48     max-width: 90px; 48     max-width: 90px;
49     height: 27px; 49     height: 27px;
50     float: right; 50     float: right;
51     margin: 0 0 5px 10px; 51     margin: 0 0 5px 10px;
52     text-align: center; 52     text-align: center;
53     cursor: pointer; 53     cursor: pointer;
54     position: relative; 54     position: relative;
55     border: 1px solid rgb(218, 218, 218); 55     border: 1px solid rgb(218, 218, 218);
56     border-radius: 3px; 56     border-radius: 3px;
57     overflow: hidden; 57     overflow: hidden;
58     text-overflow: ellipsis; 58     text-overflow: ellipsis;
59 } 59 }
60  60 
61 .product-items .swatch-option { 61 .product-items .swatch-option {
62     min-width: 25px; 62     min-width: 25px;
63     height: 25px; 63     height: 25px;
64     margin: 0 0 5px 5px; 64     margin: 0 0 5px 5px;
65 } 65 }
66  66 
67 .swatch-option:last-child { 67 .swatch-option:last-child {
68     margin-left: 0; 68     margin-left: 0;
69 } 69 }
70  70 
71 .swatch-option-link-layered .swatch-option { 71 .swatch-option-link-layered .swatch-option {
72     margin-right: 3px; 72     margin-right: 3px;
73     margin-left: 3px; 73     margin-left: 3px;
74 } 74 }
75  75 
76 .swatch-option.text { 76 .swatch-option.text {
77     background: #F2F2F2; 77     background: #F2F2F2;
78     color: #777; 78     color: #777;
79     font-size: 12px; 79     font-size: 12px;
80     font-weight: 400; 80     font-weight: 400;
81     line-height: 20px; 81     line-height: 20px;
82     padding: 4px; 82     padding: 4px;
83     min-width: 27.7px; 83     min-width: 27.7px;
84 } 84 }
85 .product-items .swatch-option.text { 85 .product-items .swatch-option.text {
86     line-height: 15px; 86     line-height: 15px;
87     margin-left: 5px; 87     margin-left: 5px;
88 } 88 }
89 .swatch-option.selected { 89 .swatch-option.selected {
90     border-color: #08c; 90     border-color: #08c;
91     color: #333; 91     color: #333;
92 } 92 }
93  93 
94 .swatch-option.text.selected {    
95     background-color: #FFF !important;    
96 }    
97     
98 .clearfix:after { 94 .clearfix:after {
99     content: " "; /* Older browser do not support empty content */ 95     content: " "; /* Older browser do not support empty content */
100     visibility: hidden; 96     visibility: hidden;
101     display: block; 97     display: block;
102     height: 0; 98     height: 0;
103     clear: both; 99     clear: both;
104 } 100 }
105  101 
106 .swatch-attribute.size .swatch-option, .swatch-attribute.manufacturer .swatch-option { 102 .swatch-attribute.size .swatch-option, .swatch-attribute.manufacturer .swatch-option {
107     background: rgb(240, 240, 240); 103     background: rgb(240, 240, 240);
108     color: rgb(148, 148, 148); 104     color: rgb(148, 148, 148);
109 } 105 }
110  106 
111 .swatch-attribute.size .swatch-option.selected, .swatch-attribute.manufacturer .swatch-option.selected { 107 .swatch-attribute.size .swatch-option.selected, .swatch-attribute.manufacturer .swatch-option.selected {
112     color: black; 108     color: black;
113     background: #fff; 109     background: #fff;
114     border-color: #08c; 110     border-color: #08c;
115 } 111 }
116  112 
117 .swatch-option:not(.disabled):hover { 113 .swatch-option:not(.disabled):hover {
118     border-color: #08c; 114     border-color: #08c;
119     color: #333; 115     color: #333;
120 } 116 }
121  117 
122 .swatch-option.image:not(.disabled):hover, 118 .swatch-option.image:not(.disabled):hover,
123 .swatch-option.color:not(.disabled):hover { 119 .swatch-option.color:not(.disabled):hover {
124     border-color: #08c; 120     border-color: #08c;
125 } 121 }
126  122 
127 .swatch-option.disabled { 123 .swatch-option.disabled {
128     cursor: default; 124     cursor: default;
129 } 125 }
130  126 
131 .swatch-option.disabled:after { 127 .swatch-option.disabled:after {
132     content: ''; 128     content: '';
133     position: absolute; 129     position: absolute;
134     left: 0; 130     left: 0;
135     right: 0; 131     right: 0;
136     top:0; 132     top:0;
137     bottom: 0; 133     bottom: 0;
138     background: -moz-linear-gradient(to left top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 46%, rgba(255,82,22,1) 47%, rgba(255,82,22,1) 53%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 57%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%); 134     background: -moz-linear-gradient(to left top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,1) 43%, rgba(255,255,255,1) 46%, rgba(255,82,22,1) 47%, rgba(255,82,22,1) 53%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 57%, rgba(255,255,255,0) 58%, rgba(255,255,255,0) 100%);
139     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0)), color-stop(43%,rgba(255,255,255,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(255,82,22,1)), color-stop(53%,rgba(255,82,22,1)), color-stop(54%,rgba(255,255,255,1)), color-stop(57%,rgba(255,255,255,1)), color-stop(58%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); 135     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(42%,rgba(255,255,255,0)), color-stop(43%,rgba(255,255,255,1)), color-stop(46%,rgba(255,255,255,1)), color-stop(47%,rgba(255,82,22,1)), color-stop(53%,rgba(255,82,22,1)), color-stop(54%,rgba(255,255,255,1)), color-stop(57%,rgba(255,255,255,1)), color-stop(58%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
140     background: -webkit-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 136     background: -webkit-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
141     background: -o-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 137     background: -o-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
142     background: -ms-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 138     background: -ms-linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
143     background: linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%); 139     background: linear-gradient(to left top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,1) 43%,rgba(255,255,255,1) 46%,rgba(255,82,22,1) 47%,rgba(255,82,22,1) 53%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 57%,rgba(255,255,255,0) 58%,rgba(255,255,255,0) 100%);
144     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); 140     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
145 } 141 }
146  142 
147 .swatch-option-tooltip { 143 .swatch-option-tooltip {
148     max-width: 140px; 144     max-width: 140px;
149     /*max-height: 160px;*/ 145     /*max-height: 160px;*/
150     max-height: 100%; 146     max-height: 100%;
151     min-height: 20px; 147     min-height: 20px;
152     min-width: 20px; 148     min-width: 20px;
153     position: absolute; 149     position: absolute;
154     padding: 5px; 150     padding: 5px;
155     background: #fff; 151     background: #fff;
156     color: rgb(148, 148, 148); 152     color: rgb(148, 148, 148);
157     border: 1px solid #ccc; 153     border: 1px solid #ccc;
158     display: none; 154     display: none;
159     z-index: 999; 155     z-index: 999;
160     text-align: center; 156     text-align: center;
161     border-radius: 2px; 157     border-radius: 2px;
162 } 158 }
163  159 
164 .swatch-option-tooltip .corner, 160 .swatch-option-tooltip .corner,
165 .swatch-option-tooltip-layered .corner { 161 .swatch-option-tooltip-layered .corner {
166     right: auto; 162     right: auto;
167     position: absolute; 163     position: absolute;
168     bottom: 0; 164     bottom: 0;
169     height: 7px; 165     height: 7px;
170     width: 16px; 166     width: 16px;
171 } 167 }
172  168 
173 .swatch-option-tooltip .corner:after, 169 .swatch-option-tooltip .corner:after,
174 .swatch-option-tooltip-layered .corner:after { 170 .swatch-option-tooltip-layered .corner:after {
175     content: ''; 171     content: '';
176     position: relative; 172     position: relative;
177     top: -17px; 173     top: -17px;
178     right: 0; 174     right: 0;
179     width: 0; 175     width: 0;
180     height: 0; 176     height: 0;
181     border-style: solid; 177     border-style: solid;
182     border-width: 7px 7.5px 0 7.5px; 178     border-width: 7px 7.5px 0 7.5px;
183     border-color: #fff transparent transparent transparent; 179     border-color: #fff transparent transparent transparent;
184     font-size: 1px; 180     font-size: 1px;
185 } 181 }
186  182 
187 .swatch-option-tooltip .corner:before, 183 .swatch-option-tooltip .corner:before,
188 .swatch-option-tooltip-layered .corner:before { 184 .swatch-option-tooltip-layered .corner:before {
189     content: ''; 185     content: '';
190     position: relative; 186     position: relative;
191     top: 2px; 187     top: 2px;
192     right: 0; 188     right: 0;
193     width: 0; 189     width: 0;
194     height: 0; 190     height: 0;
195     border-style: solid; 191     border-style: solid;
196     border-width: 8px 8.5px 0 8.5px; 192     border-width: 8px 8.5px 0 8.5px;
197     border-color: #adadad transparent transparent transparent; 193     border-color: #adadad transparent transparent transparent;
198     font-size: 1px; 194     font-size: 1px;
199 } 195 }
200  196 
201 .swatch-option-tooltip .image, 197 .swatch-option-tooltip .image,
202 .swatch-option-tooltip-layered .image { 198 .swatch-option-tooltip-layered .image {
203     display: block; 199     display: block;
204     height: 130px; 200     height: 130px;
205     width: 130px; 201     width: 130px;
206     /*margin: 0 0 5px;*/ 202     /*margin: 0 0 5px;*/
207     margin: 0 auto; 203     margin: 0 auto;
208 } 204 }
209  205 
210 .swatch-option-tooltip .title { 206 .swatch-option-tooltip .title {
211     max-width: 140px; 207     max-width: 140px;
212     min-height: 20px; 208     min-height: 20px;
213     max-height: 200px; 209     max-height: 200px;
214     color: rgb(40, 40, 40); 210     color: rgb(40, 40, 40);
215     text-align: center; 211     text-align: center;
216     display: block; 212     display: block;
217     overflow: hidden; 213     overflow: hidden;
218 } 214 }
219  215 
220 .swatch-opt { 216 .swatch-opt {
221     margin: 20px 0; 217     margin: 20px 0;
222 } 218 }
223  219 
224 .product-info-main .swatch-opt { 220 .product-info-main .swatch-opt {
225     margin: 0; 221     margin: 0;
226 } 222 }
227  223 
228 .swatch-more { 224 .swatch-more {
229     display: inline-block; 225     display: inline-block;
230     margin: 2px 0; 226     margin: 2px 0;
231     text-decoration: none !important; 227     text-decoration: none !important;
232     position: static; 228     position: static;
233     z-index: 1; 229     z-index: 1;
234 } 230 }
235  231 
236 /* Layered Features */ 232 /* Layered Features */
237 .swatch-option-link-layered { 233 .swatch-option-link-layered {
238     position: relative; 234     position: relative;
239     margin: 0 !important; 235     margin: 0 !important;
240     padding: 0 !important; 236     padding: 0 !important;
241 } 237 }
242  238 
243 .swatch-option-tooltip-layered { 239 .swatch-option-tooltip-layered {
244     width: 140px; 240     width: 140px;
245     position: absolute; 241     position: absolute;
246     background: #fff; 242     background: #fff;
247     color: rgb(148, 148, 148); 243     color: rgb(148, 148, 148);
248     border: 1px solid #adadad; 244     border: 1px solid #adadad;
249     display: none; 245     display: none;
250     z-index: 999; 246     z-index: 999;
251     right: -47px; 247     right: -47px;
252 } 248 }
253  249 
254 .swatch-visual-tooltip-layered { 250 .swatch-visual-tooltip-layered {
255     height: 160px; 251     height: 160px;
256     top: -170px; 252     top: -170px;
257 } 253 }
258  254 
259 .swatch-textual-tooltip-layered { 255 .swatch-textual-tooltip-layered {
260     height: 30px; 256     height: 30px;
261     top: -40px; 257     top: -40px;
262 } 258 }
263  259 
264 .swatch-option-link-layered:hover > .swatch-option-tooltip-layered { 260 .swatch-option-link-layered:hover > .swatch-option-tooltip-layered {
265     display: block; 261     display: block;
266 } 262 }
267  263 
268 .swatch-attribute-options .swatch-option-tooltip-layered .title { 264 .swatch-attribute-options .swatch-option-tooltip-layered .title {
269     width: 100%; 265     width: 100%;
270     height: 20px; 266     height: 20px;
271     position: absolute; 267     position: absolute;
272     bottom: -5px; 268     bottom: -5px;
273     left: 0; 269     left: 0;
274     color: rgb(40, 40, 40); 270     color: rgb(40, 40, 40);
275     text-align: center; 271     text-align: center;
276     margin-bottom: 10px; 272     margin-bottom: 10px;
277 } 273 }
278  274 
279 .swatch-option-disabled:after { 275 .swatch-option-disabled:after {
280     content: ''; 276     content: '';
281     position: absolute; 277     position: absolute;
282     width: 42px; 278     width: 42px;
283     height: 2px; 279     height: 2px;
284     background: red; 280     background: red;
285     transform: rotate(-30deg); 281     transform: rotate(-30deg);
286     -o-transform: rotate(-30deg); 282     -o-transform: rotate(-30deg);
287     -moz-transform: rotate(-30deg); 283     -moz-transform: rotate(-30deg);
288     -ms-transform: rotate(-30deg); 284     -ms-transform: rotate(-30deg);
289     -webkit-transform: rotate(-30deg); 285     -webkit-transform: rotate(-30deg);
290     z-index: 995; 286     z-index: 995;
291     right: -4px; 287     right: -4px;
292     top: 10px; 288     top: 10px;
293 } 289 }
294  290 
295 .swatch-option-disabled { 291 .swatch-option-disabled {
296     outline: none !important; 292     outline: none !important;
297     cursor: default; 293     cursor: default;
298     border: 0; 294     border: 0;
299 } 295 }
300  296 
301 /* Bugfix for Add To Cart button */ 297 /* Bugfix for Add To Cart button */
302 div[class^="swatch-opt-"] { 298 div[class^="swatch-opt-"] {
303     margin-bottom: 10px; 299     margin-bottom: 10px;
304 } 300 }
305  301 
306 .swatch-option-loading { 302 .swatch-option-loading {
307     content: url("../images/loader-2.gif"); 303     content: url("../images/loader-2.gif");
308 } 304 }

Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.